<!--
 * @Author: CNN 969682281@qq.com
 * @Date: 2023-03-07 14:16:56
 * @LastEditors: CNN 969682281@qq.com
 * @LastEditTime: 2023-06-30 15:10:47
 * @FilePath: \newMould_BHZ\src\views\WaterManage\intellect\collection.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 水稳--- 智能监控----采集状态 -->
  <div class="department" id="department">
    <!-- 左侧部门管理 -->
    <div class="structureTree" v-if="treelength">
      <div class="structureTree_title">
        <div>组织机构</div>
        <div>
          <!-- <el-checkbox v-model="checked" @change="see()">查看下级</el-checkbox> -->
        </div>
      </div>
      <tree
        :treeData="treeData"
        :checkData="checkData"
        nodeKey="fCompanyid"
        @getTreeInfo="handleNodeClick"
        :defaultProps="defaultProps"
      >
      </tree>
    </div>
    <!-- 右侧 -->
    <div class="department_right">
      <!-- 机构名称 -->
      <el-breadcrumb :title="showName"></el-breadcrumb>
      <!-- 顶部导航栏 -->
      <div class="networkStatus">
        <div
          class="networkStatusBigBox"
          v-for="(item, index) in tableData"
          :key="index"
        >
          <div class="networkImg">
            <img :src="item.STATUS == 0 ? online2 : online1" alt="" />
          </div>
          <div class="networkInfo">
            <div class="bhClass bhjname">{{ item.F_MachineName }}</div>
            <div class="bhClass bhjid">{{ item.F_MachineId }}</div>
            <div class="bhClass bhjname">{{ item.F_StationName }}</div>
            <div class="bhClass bhjid">{{ item.F_StationId }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import tree from "@/components/public/waManage_tree"; //左侧机构树
import elBreadcrumb from "@/components/public/el-breadcrumb.vue"; //面包屑
import {
  getUserCompanyTreeList, //左侧机构树接口
  getMachineStatus, // 拌合机在线状态
} from "@/api/request.js";
export default {
  name: "collection",
  data() {
    return {
      name: "collection", //按钮配置页面代号
      highlightBd: true, //左侧机构树停留背景色
      // require("../../static/Scope.png"),
      online2: require("../../../assets/img/waterMange/CjN.png"),
      online1: require("../../../assets/img/waterMange/CjY.png"),
      treelength: false, //左侧树显示隐藏
      checked: true, //查看下级按钮
      showName: "未选择公司",

      fId: null, //点击当前列表数据fId
      listLoading: false, //列表数据加载loading
      // 列表给后端传参
      getList: {
        companyId: "", // 施工标段id
      },
      companyTree: "", //所有数据
      treeData: [], //左侧树状图数据
      tableData: [], //拌合站数据
      // 左侧机构树
      defaultProps: {
        children: "children",
        label: "fShortname",
      },
      checkData: [],
      userInfo: {}, //登录用户
      treeText: {
        //树状图参数
        companyId: null,
        userId: null,
        text: null,
      },
    };
  },
  components: {
    tree, //左侧组织机构数
    // TableData, //主页面列表
    elBreadcrumb, //面包屑

    // myCharts,
  },
  mounted() {
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    if (JSON.parse(sessionStorage.getItem("waterManage_treeCheck"))) {
      var id = JSON.parse(sessionStorage.getItem("waterManage_treeCheck"));
      this.checkData = [id.fCompanyid];
    }
    this.getTree();
    this.btnRole(this.name);
  },

  methods: {
    btnRole(name) {
      // 按钮权限
      var btnList = [];
      var ModuleList = JSON.parse(sessionStorage.getItem("ModuleList"));
      if (ModuleList.length > 0) {
        ModuleList.map((item) => {
          if (item.fEncode == name) {
            btnList = item.modulebuttonList;
          }
        });
        var btnStr = [];
        btnList.map((item) => {
          btnStr.push(item.fEncode);
        });
        // this.yj_view = btnStr.includes("yj_view");
      } else {
        // this.yj_view = true;
      }
    },

    // 左侧树结构
    getTree() {
      this.treeText = {
        companyId: this.userInfo.companyId,
        userId: this.userInfo.userId,
        text: "2", // 0其他  1 砼拌合站 2水稳 3沥青
      };
      getUserCompanyTreeList(this.treeText)
        .then((res) => {
          if (res.errcode == 0) {
            var companyTree = res.data.userCompanyTreeList;
            this.treeData = this.tranListToTreeData(companyTree);
            if (this.treeData[0].children == undefined) {
              this.treelength = false; //左侧组织机构是否显示
            } else {
              this.treelength = true;
            }

            if (this.checkData[0]) {
              this.showName = JSON.parse(
                sessionStorage.getItem("waterManage_treeCheck")
              ).fShortname;

              this.getList.companyId = this.checkData[0];
            } else {
              this.checkData[0] = this.treeData[0].fCompanyid;
              this.showName = this.treeData[0].fShortname; //当前点击组织机构名称
              this.getList.companyId = this.treeData[0].fCompanyid; //当前点击组织机构ID
            }

            this.yj_searchForm(this.getList); // 调用主页面列表接口
            // 列表
          } else {
            this.$message.error(res.msg);
            // this.$message.error("获取组织机构失败");
            return false;
          }
        })
        .catch(() => {
          return false;
        });
    },
    tranListToTreeData(data) {
      //处理树状图数据
      let result = [];
      if (!Array.isArray(data)) {
        return result;
      }
      // 清除已存在的children 重新赋值
      data.forEach((item) => {
        delete item.children;
      });

      let map = {};
      data.forEach((item) => {
        map[item.fCompanyid] = item;
      });

      data.forEach((item) => {
        let parent = map[item.fParentid];
        if (parent) {
          (parent.children || (parent.children = [])).push(item);
        } else {
          result.push(item);
        }
      });
      return result;
    },
    // 点击左侧机构树
    handleNodeClick(data) {
      this.showName = data.fShortname; //顶部显示机构名
      this.getList.companyId = data.fCompanyid;
      this.yj_searchForm(this.getList);
    },
    // 获取列表数据
    yj_searchForm(data) {
      this.listLoading = true;
      // window.sessionStorage.setItem("getLists", JSON.stringify(data));
      var sc = {
        fCompanyid: data.companyId, // 施工标段id
      };

      getMachineStatus(sc)
        .then((res) => {
          if (res.errcode == 0) {
            var that = this;
            that.listLoading = false;
            this.tableData = res.data;
            console.log(this.tableData);
          } else {
            this.$message.error(res.msg);
            return false;
          }
        })
        .catch((error) => {
          this.$message.error(error.msg);
        });
    },
  },
};
</script>

<style scoped lang="less">
.networkStatus {
  // background: pink;
  flex: 1;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  min-width: 740px;

  .networkStatusBigBox {
    background-color: #fff;
    border: 1px solid #ccc;
    height: 32.6%;
    // height: 100rpx;
    // 每个元素都要设置右边距margin-right（每个元素的左右间隙）
    // 同时设置下边距margin-bottom（每个元素的上下间隙）
    margin: 0 10px 10px 0;
    width: calc((100% - 40px) / 5);
    // 这里一行显示4个，所以是/4，一行显示几个就除以几
    // 这里的60rpx = (分布个数4-1)*间隙20rpx, 可以根据实际的分布个数和间隙区调整
    min-width: calc((100% - 40px) / 5);
    max-width: calc((100% - 40px) / 5);
    border-radius: 10px;
    box-sizing: border-box;
    padding: 10px 15px;
    display: flex;
    flex-direction: column;

    .networkImg {
      // height: 150px;
      height: 50%;
      // background: pink;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 30%;
        min-width: 30%;
        min-height: 60%;
        max-height: 90%;
      }
    }

    .networkInfo {
      height: 50%;
      border-top: 1px solid #eee;
      // background: red;
      font-size: 12px;
      padding: 0;
      display: flex;
      flex-direction: column;

      .bhClass {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 25%;

        overflow: hidden; //（文字长度超出限定宽度，则隐藏超出的内容）
        white-space: nowrap; //（设置文字在一行显示，不能换行）
        text-overflow: ellipsis; //（规定当文本溢出时，显示省略符号来代表被修剪的文本）
      }

      .bhjname {
        font-weight: 700;
      }
    }

    // 每行最右侧的那个不设置右外边距
    &:nth-child(5n + 5) {
      margin-right: 0;
    }

    &:hover {
      /* 盒子向上移动 */
      transform: translateY(-1px);
      /* 背景 */
      box-shadow: 0 20px 80px rgba(48, 49, 51, 0.15);
    }
  }
}
</style>

 